<template>
  <div>
    <div class="searching" style="width: 60%;height: 20%; margin-top: 10px; margin-right: 10px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="formInline.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input v-model="formInline.idNumber" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input v-model="formInline.deviceId" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findPage()">查询</el-button>
          <el-button type="primary" @click="qingkong">清空</el-button>
        </el-form-item>
      </el-form>
      <button @click="toggleTable">{{ isTableVisible ? '收起表格' : '展开表格' }}</button>
      <el-table
          :data="tableData"
          v-if="isTableVisible"
          border
          style="width: 100%">
        <el-table-column
            prop="id"
            label="序号"
        >
        </el-table-column>

        <el-table-column
            prop="bh"
            label="设备编号"
        >
        </el-table-column>

        <el-table-column
            prop="bdsb"
            label="设备类型"
        >
        </el-table-column>

        <el-table-column
            prop="name"
            label="姓名"
        >
        </el-table-column>

        <el-table-column
            prop="zjhm"
            label="证件号码"
        >
        </el-table-column>

        <el-table-column
            prop="department"
            label="所属部门"
        >
        </el-table-column>
        <el-table-column

            label="绑定状态"
        >
          <template slot-scope="scope">
            {{scope.row.bindingState == 1 ? '已绑定' : '未绑定'}}
          </template>
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="toDw(scope.row.id)" size="mini">定位</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页展示数据-->
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <div id="container_2" style="width: 100%; height: calc(100vh - 100px)">
    </div>
    <div id="info"></div>
  </div>
</template>

<script>import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: "Map",
  data() {
    return{
      tableData:[],
      pageNum:1,
      pageSize:10,
      total:0,
      formInline:{},
      latitude: '',
      longitude: '',
      locationInfo: '',
      geocoder: null,
      infoWindowContent: {
      },
      isTableVisible: true,
    }
  },
  created() {
    this.findPage();
    this.initMap();
  },
  methods:{
    // const lnglat = this.coordinates.split
    findPage(){ //查询所有加分页参数
      this.axios.post(`http://localhost:9007/dwFw/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.formInline).then(res=>{
        console.log(res.data);
        this.tableData=res.data.data.records;
        this.total=res.data.data.total;
        if (this.pageNum>res.data.data.pages){
          this.pageNum=res.data.data.pages;
          this.findPage();
        }
      })
    },
    toggleTable() {
      this.isTableVisible = !this.isTableVisible; // 切换表格的显示状态
    },
    regeoCode() {
      // 确保 Geocoder 插件加载完成
      (',');
      //
      // this.map.add(this.marker);
      // this.marker.setPosition(lnglat);

      // this.geocoder.getAddress([this.longitude, this.latitude], (status, result) => {
      //   if (status === 'complete' && result.regeocode) {
      //     this.infoWindowContent.sswz = result.regeocode.formattedAddress;
      //   } else {
      //     console.error('根据经纬度查询地址失败');
      //   }
      // });
    },
    handleCurrentChange(val) {//分页方法
      this.pageNum=val;
      this.findPage();
    },
    toDw(id){
      this.axios.post(`http://localhost:9007/dwFw/findId?id=${id}`).then(res=> {
        this.latitude= res.data.data.longitude;
        this.longitude= res.data.data.dimensionality;
        this.infoWindowContent = res.data.data;

        this.goToLocation();
        this.regeoCode();
        this.Addbz();
        this.isTableVisible = false;
      });
    },
    Addbz() {
      const marker = new AMap.Marker({
        position: new AMap.LngLat(...[this.longitude, this.latitude]),
        title: '点击我查看数据'
      });
      marker.setMap(this.map);
      const infoWindow = new AMap.InfoWindow({
        content: `<div style="text-align:center;">
           姓名：${this.infoWindowContent.name}<br>
           设备：${this.infoWindowContent.dz}_${this.infoWindowContent.bdsb}<br>
           联系电话：${this.infoWindowContent.lxhm}<br>
           通讯地址：${this.infoWindowContent.dz}<br>
           当前地址：${this.infoWindowContent.address}<br>
           定位状态：${this.infoWindowContent.bindingState==1?"已绑定":"未绑定"}<br>
           </div>`, // 弹窗内容
        offset: new AMap.Pixel(0, -30) // 弹窗偏移量
      });
      marker.on('click', () => {
        infoWindow.open(this.map, marker.getPosition());
      });
    },
    qingkong() {
      this.formInline = {};
      this.findPage();
    },
    initMap() {
      AMapLoader.load({
        key: '090843d2967de6adc0b44ae4f47e9dc0', // 替换为你的API Key
        version: '2.0',
        plugins: []
      }).then(AMap => {
        this.map = new AMap.Map('container_2', {
          zoom: 10,
          center: [117.11, 35.11] // 初始中心点
        });
      }).catch(e => {
        console.error('地图加载失败', e);
      });
    },
    async goToLocation() {
      const [lng, lat] = [this.longitude, this.latitude];
      this.map.setZoom(15); // 设置缩放级别
      this.map.setCenter([lng, lat]);
    },
  },
  mounted() {
    // // 创建地图实例
    AMapLoader.load({
      key: '090843d2967de6adc0b44ae4f47e9dc0', // 替换为你的API Key
      version: '2.0',
      plugins: []
    }).then(AMap => {
      this.map = new AMap.Map('container_2', {
        zoom: 10,
        center: [117.11, 35.11] // 初始中心点
      });
    }).catch(e => {
      console.error('地图加载失败', e);
    });
  }
}
</script>
<style scoped>
.searching {
  float: left;
  position: absolute;
  z-index: 999;
  top: 80px;
}

</style>

